<template>
    <div style="width: 100%; border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
            :mode="mode" />
        <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
            :mode="mode" @onCreated="handleCreated" />
    </div>
</template>
<script lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, toRefs, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IEditorConfig } from '@wangeditor/editor'
import { getUploadUrlApi } from '../../api/cms/article/article'
import { getToken } from '@/utils/auth'
import { ElMessage } from 'element-plus'
import axios from 'axios'

interface Data {
    [key: string]: unknown
}
interface SetupContext {
    //这里还有其他的，为了避免混淆，就不写了。
    emit: (event: string, ...args: unknown[]) => void
}
type InsertFnType = (url: string, alt: string, href: string) => void

export default {
    components: { Editor, Toolbar },
    props: {
        editorValue: {
            type: String,
            default: '',
        }
    },
    setup(props: Data, { emit }: SetupContext) {
        const { editorValue } = toRefs(props)

        // 编辑器实例，必须用 shallowRef
        const editorRef = shallowRef()

        // 内容 HTML
        const valueHtml = ref('')

        // 模拟 ajax 异步获取内容
        onMounted(() => {

        })

        const toolbarConfig = {}
        const editorConfig: Partial<IEditorConfig> = {
            placeholder: '请输入内容...', MENU_CONF: {
                'uploadImage': {
                    // // 上传图片的配置
                    // server: getUploadUrlApi(),
                    // fieldName: 'file',

                    // // 单个文件的最大体积限制，默认为 3M
                    // maxFileSize: 3 * 1024 * 1024,

                    // // 最多可上传几个文件，默认为 100
                    // maxNumberOfFiles: 10,

                    // // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                    // allowedFileTypes: ['image/*'],

                    // // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                    // // meta: {
                    // //     token: 'xxx',
                    // //     otherKey: 'yyy'
                    // // },


                    // // 将 meta 拼接到 url 参数中，默认 false
                    // metaWithUrl: false,
                    // // 单个文件上传成功之后
                    // onSuccess(file: File, res: any) {
                    //     console.log(`${file.name} 上传成功`, res)
                    // },
                    // // 上传错误，或者触发 timeout 超时
                    // onError(file: File, err: any, res: any) {
                    //     console.log(`${file.name} 上传出错`, err, res)
                    // },
                    // // 自定义插入图片
                    // customInsert(res: any, insertFn: InsertFnType) {
                    //     // res 即服务端的返回结果

                    //     // 从 res 中找到 url alt href ，然后插图图片
                    //     insertFn(res.data[0], '', '')
                    // },
                    async customUpload(file: any, insertFn: InsertFnType) {
                        const isImage = file.type.split('/')[0] == 'image';
                        if (!isImage) {
                            ElMessage.error(file.name + "上传出错")
                            return
                        }
                        let formData = new FormData();
                        formData.append("file", file); //这里说明一下,因为我们接口要求名字为file,你们接口要求什么可以填什么
                        const configs = {
                            // 上传请求头
                            headers: {
                                'Authorization': 'Bearer ' + getToken(),
                            },
                            // 上传进度
                            onUploadProgress: (progressEvent: any) => {
                                let percent = (progressEvent.loaded / progressEvent.total * 100 | 0);
                            },
                        };
                        const res = await axios.post(getUploadUrlApi(), formData, configs);
                        const { data, code } = res.data;
                        console.log(data, code)
                        if (code == 200) {
                            insertFn(data[0], '', '');  // insertFn 参数1：路径； 参数2：alt值； 参数三：路径
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    }
                }
            }
        }

        // 组件销毁时，也及时销毁编辑器
        onBeforeUnmount(() => {
            const editor = editorRef.value
            // console.log("editor=", editor)
            if (editor == null) return
            editor.destroy()
        })

        const handleCreated = (editor: string) => {
            editorRef.value = editor // 记录 editor 实例，重要！
        }

        watch(
            () => editorValue.value,
            (newValue) => {
                valueHtml.value = String(newValue)
            }
        )
        watch(
            () => valueHtml.value,
            (newValue) => {
                // console.log(newValue)
                emit('inputContent', newValue)
            }
        )

        return {
            editorRef,
            valueHtml,
            mode: 'default', // 或 'simple'
            toolbarConfig,
            editorConfig,
            handleCreated
        };
    }
}
</script>